<template>
    <div class="dialog-search">
        <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline top-screen" v-if="formInline">
            <div class="top-screen-left">
                <el-form-item v-for="(item, index) in formItemList" :key="index">
                    <!-- 下拉选择框 -->
                    <el-select
                        v-if="item.type == 'select'"
                        v-model="formInline[item.param]"
                        :multiple="item.multiple"
                        :placeholder="'请选择' + item.label"
                        size="mini"
                        clearable
                        @clear="() => clear(formInline[item.param], item.param)"
                        @change="() => change(formInline[item.param], item.param)"
                    >
                        <el-option
                            v-for="(item2, index2) in item.selectOptions"
                            :key="index2"
                            :label="item2.text"
                            :value="item2.value"
                        ></el-option>
                    </el-select>
                    <!-- 下拉选择框end -->
                    <!-- 输入框 -->
                    <el-input
                        v-if="item.type == 'input'"
                        v-model="formInline[item.param]"
                        size="mini"
                        :placeholder="'请输入' + item.label"
                        @clear="() => clear(formInline[item.param], item.param)"
                        @change="() => change(formInline[item.param], item.param)"
                        clearable
                    ></el-input>
                    <!-- 输入框 -->
                    <!-- 日期范围选择框 -->
                    <el-date-picker
                        v-if="item.type == 'daterange' || item.type == 'datetimerange' || item.type == 'date' || item.type == 'datetime'"
                        v-model="formInline[item.param]"
                        :value-format="item.valueFormat || 'yyyy-MM-dd'"
                        :format="item.format || 'yyyy-MM-dd'"
                        clearable
                        :type="item.type || ''"
                        :range-separator="item.rangeSeparator || '至'"
                        :start-placeholder="item.startPlaceholder"
                        :end-placeholder="item.endPlaceholder"
                        :placeholder="'请选择' + item.label"
                        :startPlaceholder="item.label + '开始日期'"
                        :endPlaceholder="item.label + '结束日期'"
                        size="mini"
                        @clear="() => clear(formInline[item.param], item.param)"
                        @change="() => change(formInline[item.param], item.param)"
                    >
                    </el-date-picker>
                    <!-- 日期范围选择框end -->
                    <!-- 级联选择器 -->
                    <el-cascader
                        v-if="item.type == 'cascader'"
                        v-model="formInline[item.param]"
                        size="mini"
                        :options="item.options"
                        :props="item.props"
                        :placeholder="'请选择' + item.label"
                        clearable
                        @clear="() => clear(formInline[item.param], item.param)"
                        @change="() => change(formInline[item.param], item.param)"
                    ></el-cascader>
                    <!-- 级联选择器end -->
                </el-form-item>
                <slot name="formItem"></slot>
            </div>
            <div class="top-screen-right">
                <el-form-item v-if="isShowDefault">
                    <el-button
                        type=""
                        size="mini"
                        @click="resetForm('ruleForm')"
                        class="top-right-bottom top-right-Reset-bottom top-right-bottom-I"
                        >重置</el-button
                    >
                    <el-button type="primary" size="mini" @click="onSubmit" class="top-right-bottom top-right-bottom-I">查询</el-button>
                </el-form-item>

                <!-- 可用于显示其他按钮 -->
                <slot name="formButton" :item="formInline"></slot>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'base-search',
    props: {
        emitSearch: {
            // 是否立即执行搜索
            type: Boolean,
            default: false
        },
        isShowDefault: {
            //是否展示默认按钮
            default: true
        },
        formItemList: {
            type: Array,
            default() {
                return [
                    {
                        label: '下拉框',
                        type: 'select',
                        selectOptions: [{ text: 111, value: 111 }],
                        param: 'company',
                        defaultSelect: '', // 下拉框默认选中项
                        multiple: false
                    },
                    {
                        label: '输入框',
                        type: 'input',
                        param: 'name'
                    },
                    {
                        label: '日期范围',
                        type: 'daterange',
                        param: 'createtime'
                    },
                    {
                        label: '级联选择器',
                        type: 'cascader',
                        param: 'cascader',
                        options: [],
                        props: { multiple: false }
                    }
                ];
            }
        }
    },
    data() {
        let formInline = {};
        for (const obj of this.formItemList) {
            formInline[obj.param] = obj.defaultSelect || null;
        }
        return {
            formInline
        };
    },
    watch: {
        emitSearch(newVal,oldVal) {
            console.log(newVal,oldVal)
            // 是否立即触发搜索  用在弹窗中异步请求下拉框后  或者给下拉框赋值默认值后  需要用到这个方法
            if (newVal) {
                console.log('此时触发--立即执行搜索');
                this.$emit('search', this.formInline);
            }
        },
        formItemList: {
            handler(newVal,oldVal) {
                  console.log(newVal,oldVal)
                for (const obj of newVal) {
                    if (obj.defaultSelect) {
                        formInline[obj.param] = obj.defaultSelect;
                    }
                }
            },
            deep: true
        }
    },
    methods: {
        //input清除事件
        clear(e, param) {
            if (e === '') {
                this.formInline[param] = null;
            }
        },
        //清除指定内容
        clearYou(type) {
            this.formInline[type] = null;
        },
        //input change事件
        change(e, param) {
            this.$emit('change', { e, param });
        },
        onSubmit() {
            // console.log('submit!',this.formInline);
            this.$emit('search', this.formInline);
        },

        clearIn(param) {
            let formInline = {};
            formInline[param] = null; // 指定筛选条件清空
            this.formInline = formInline;
        },
        //添加默认值
        setDefaultData(param) {
            for (const iterator in param) {
                this.formInline[iterator]=param[iterator]
            }
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            let formInline = {};
            for (const obj of this.formItemList) {
                // formInline[obj.param] = obj.defaultSelect || "";  // 重置时下拉框的默认值如果要保留就选用这个
                formInline[obj.param] = null; // 所有筛选条件清空
            }
            this.formInline = formInline;

            this.$emit('search', this.formInline);
        }
    }
};
</script>
<style scoped lang="scss">
.top-title {
    font-size: 20px;
    font-family: RZRXNFHJ;
    font-weight: 500;
    color: #1f2329;
}

.top-screen {

    background-color: #fff;
    margin: 0px 0 0 0;
    padding: 12px 16px;
    padding-bottom: 0px;
    border-radius: 2px;
    display: flex;
    align-items: center;

    .top-screen-left {
        flex: 1;
    }
}

.top-right-bottom {
    background: #165dff;
    border-radius: 2px 2px 2px 2px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
    padding: 4px 16px;
    margin-left: 12px;
}

.top-right-Reset-bottom {
    color: #1f2329;
    background-color: #fff;
    border: 1px solid #c9cdd0;
}
</style>


